<template>
	<div class="vipCombatGradeFactor">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe738;</i>
				告警管理/
				<span>VIP战斗力等级系数配置</span>
			</div>
		</div>
		<div class="right_main">
			<div class="divider2"></div>
			<el-form :model="form"  ref="form" class="demo-form-inline" :inline="true">
				<div class="import">
					<el-form-item label="选择工程："   prop="gameId">
						<el-select v-model="form.gameId" filterable  placeholder="请搜索或选择游戏" @change="gameChange">
							<el-option v-for="(val,key) in gamelists" :label="val.projectName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="VIP等级：" prop="vipLevel" >
						<el-input v-model="form.vipLevel"></el-input>
					</el-form-item>
					<el-form-item label="VIP战斗力系数：" prop="vipCoefficient" >
						<el-input v-model="form.vipCoefficient"></el-input>
					</el-form-item>
					<el-form-item label="描述：" prop="description" >
						<el-input v-model="form.description"></el-input>
					</el-form-item>
				</div> 
				<el-form-item class="conmit">
					<el-button type="primary" @click="addForm('form')" icon="plus">立即添加</el-button>
					<el-button @click="resetForm('form')">重置</el-button><br>
				</el-form-item>
			</el-form>
			<div class="table">
				<div class="divider2"></div>
				<el-table 
					:data="tableData" 
					border 
					style="width: 100%"
	    		>
					<el-table-column prop="id" label="序列号" align="center">
					</el-table-column>
					<el-table-column prop="gameName" label="游戏名称" align="center">
					</el-table-column>
					<el-table-column prop="gameId" label="游戏ID" align="center">
					</el-table-column>
					<el-table-column prop="grade" label="VIP等级" align="center">
					</el-table-column>
					<el-table-column prop="combat" label="VIP战斗力系数" align="center">
					</el-table-column>
					<el-table-column prop="desc" label="描述" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template scope="scope">
							<el-button type="primary" size="small"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button type='danger' size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination 
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page.sync="currentPage"
					:page-sizes="[10, 20, 50]" 
					:page-size="pageSize" 
					layout="total, sizes, prev, pager, next, jumper" 
					:total="total"
				>
				</el-pagination>
			</div>
			<div class="revampForm" v-show="revampShow">
				<div class="revampChoose">
					<div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
					</div>
					<el-form :model="revampForm" :rules="rules" ref="revampForm" label-width="115px" class="demo-ruleForm">
						<h5>修改VIP战斗力等级系数配置</h5>
						<el-form-item label="选择工程："  prop="gameId">
							<el-select v-model="revampForm.gameId" filterable  placeholder="请搜索或选择游戏" @change="gameRevamp">
								<el-option v-for="(val,key) in gamelists" :label="val.projectName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="VIP等级：" prop="vipLevel">
							<el-input v-model="revampForm.vipLevel"></el-input>
						</el-form-item>
						<el-form-item label="VIP战斗力系数：" prop="vipCoefficient">
							<el-input v-model="revampForm.vipCoefficient" width="120px"></el-input>
						</el-form-item>
						<el-form-item label="描述：" prop="description">
							<el-input v-model="revampForm.description"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="revampComit('revampForm')">立即修改</el-button>
							<el-button @click="resetForm('revampForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		
		
	</div>
</template>
<script src="./vipCombatGradeFactor.js"></script>
<style lang="stylus" rel="stylesheet/stylus" src="./vipCombatGradeFactor.styl"></style>